<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.btn-box {
				width: 500px;
				margin: 50px auto;
			}
			
			button {
				margin-right: 50px;
				font-size: 16px;
				width: 80px;
				height: 80px;
				text-align: center;
				line-height: 80px;
				color: #fff;
				font-weight: bold;
				border-radius: 50%;
			}
			
			.btnClick {
				display: block;
				width: 100px;
				height: 105px;
				background: url(../images/btn-bg.png) no-repeat;
				margin-left: 60%;
				margin-top: 68px;
			}
			
			.bg1 {
				background: url(../images/1.jpg) no-repeat;
			}
			
			.btn-main {
				margin-top: 60px;
			}
			
			.container {
				position: fixed;
				bottom: 0;
				left: 0;
				height: 35%;
				width: 100%;
			}
			
			.stick {
				position: absolute;
				left: 50px;
				bottom: 100%;
				height: 5px;
				width: 0;
				background: #096;
				transform: rotate(-90deg);
				-ms-transform: rotate(-90deg);
				/*IE9*/
				-moz-transform: rotate(-90deg);
				/*Firefox*/
				-webkit-transform: rotate(-90deg);
				/*Ssfari  and Chrome*/
				-o-transform: rotate(-90deg);
				/*Opera*/
				transform-origin: 0 100%;
				-ms-transform-origin: 0 100%;
				-moz-transform-origin: 0 100%;
				-webkit-transform-origin: 0 100%;
				-o-transform-origin: 0 100%;
				transition: transform 0.35s linear;
				-moz-transition: transform 0.35s linear;
				-webkit-transition: transform 0.35s linear;
				-o-transition: transform 0.35s linear;
			}
			
			.stickDown {
				transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				-o-transform: rotate(0deg);
			}
			
			.man {
				position: absolute;
				left: 0px;
				bottom: 98%;
				width: 65px;
				height: 97px;
			}
			
			.man img {
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.well-box {
				position: absolute;
				height: 100%;
				left: 0px;
			}
			
			.well {
				position: absolute;
				height: 100%;
				background: #000;
				width: 50px;
			}
			
			.well-box div:first-of-type {
				left: 0px;
			}
			
			.well-box div:last-of-type {
				left: 400px;
			}
		</style>
	</head>

	<body class="bg1">
		<div class="btn-box">
			<p class="btn-main">
				<button class="btnClick"></button>
			</p>
		</div>
		<div class="container">
			<div class="stick" style="background: red;"></div>
			<div class="man"><img src="../images/stick_stand.png" /></div>
			<div class="well-box">
				<div class="well"></div>
				<div class="well"></div>
			</div>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			/**
			 * Created by zongjuan.wang on 2016/7/28.
			 */
			var stop = true; //按钮是否可以点击
			var colWidth; //设置柱子宽度
			function moveMan() {
				var stickW = $(".stick").width(); //获取倒下棍子的长度
				setTimeout(function() {
					$(".man").find("img").attr("src", "../images/stick.gif");
					$(".man").find("img").animate({
						"left": stickW + "px"
					}, 1000, function() {
						//判断人物是否落下
						var wellL = $(".well").eq(1).offset().left; //柱子距离屏幕左侧的距离
						var well0 = $(".well").eq(0).offset().left; //柱子距离屏幕左侧的距离
						colWidth = $(".well").eq(0).width();
						var range = wellL - well0 - colWidth; //获取两个柱子之间的距离
						if((stickW < range) || (stickW > wellL)) {
							$(".man").animate({
								"bottom": "0px"
							});
						} else {
							//如果成功
							$(".man").find("img").attr("src", "../images/stick_stand.png").css({
								"left": 0
							}).hide(); //人物变为初始
							$(".stick").removeClass("stickDown").width(0); //棍子变为初始
							var oldL = $(".well-box").offset().left;
							$(".well-box").animate({
								"left": -wellL + oldL
							}, 500, function() {
								$(".man").find("img").show();
								stop = false; //按钮可以点击
							}); //柱子移动
						}
					});
				}, 600);
			}

			$(document).ready(function() {
				//鼠标按下棍子变长
				$(".btnClick").mousedown(function() {
					if(stop) {
						$(".stick").animate({
							"width": "500px"
						}, 2500); //棍子变长
					}
				});
				//鼠标弹起
				$(".btnClick").mouseup(function() {
					if(stop) {
						$(".stick").stop(); //棍子停止变长
						stop = false;
						$(".stick").addClass("stickDown"); //棍子倒下
						moveMan();
					}
				});
			})
		</script>
	</body>

</html>